<template>
	<div v-if="isLogin" >
		<!-- 已登录 -->
		<div v-if="isLogin">
			<!-- 用户信息 -->
			<van-cell center class="member">
				<template #icon>
					<van-image :src="avatar" width="70px" style="box-shadow: 0px 0px 10px #C8C9CC;" round></van-image>
				</template>
				<template #title>
					<span class="title">{{name}}</span>
					<span style="font-size: 10px;margin-top: 0.5rem; margin-left:1rem;">开心游戏，开心玩</span>
				</template>
			</van-cell>
			<!-- 用户课操作功能列表 -->
			<van-row
				style="background-color: #01CBE2; margin-left: 1rem;margin-right: 1rem; border-radius:2rem;text-align: center;height: 6rem; box-shadow: 0px 1px 10px #C8C9CC;margin-top: 1rem;">
				<van-col v-for="(item,i) in userItems" :key="i" style="margin-top: 1.8rem; " span="6">
					<div style="color: #FFFFFF; font-weight: bold;font-size: 24px;">{{item.number}}</div>
					<div style="font-size: 14px;color: #FFFFFF;">{{item.title}}</div>
				</van-col>
			</van-row>
			<van-grid :border="false" :column-num="3" style="margin-right: 1rem;padding: 1.5rem 0;" :gutter="10">
				<van-grid-item v-for="(item,i) in cellItems" :key="i" :to="{name:item.name}">
					<div style="text-align: center;">
						<van-icon :name="item.img" size="35" />
						<div>{{item.title}}</div>
					</div>
				</van-grid-item>
			</van-grid>
		</div>
	</div>

	<!-- 未登录 -->
	<div v-else>
		<van-row style="background-color: #ecfafb; width: 100%;height: 10rem;" type="flex" align="center">
			<van-col span="12">
				<div style="color:#01CBE2;font-size: 26px; margin-left: 2rem;">登录游乐园</div>
				<div style="color:#01CBE2;font-size: 14px;margin-left: 2rem;margin-top: 0.3rem;">关注更多精彩内容和动态</div>
				<van-button @click="onDetail()" round 
					style="color:#01CBE2 ;border: 0;margin-left: 2rem; margin-top: 0.5rem;box-shadow: 0px 1px 10px #C8C9CC;font-size: 16px;font-weight: bold;">
					立即登录</van-button>
			</van-col>
			<van-col span="12" style="width:40%;height: 10rem; ">
				<img src="../../assets/images/dl.jpg" style="width: 100%;height: 10rem;">
			</van-col>
		</van-row>
		
	</div>
</template>

<script>
	import {
		getTokenLocal,
		getUserLocal,
		removeTokenLocal
	} from "@/utils/auth.js"
	import {
		getDetailByIdAPI,
		getMyCountAPI
	} from "@/api/user.js";
	export default {
		name: "user",
		data() {
			return {
				user: {},
				name:'',
				avatar_default: require("@/assets/images/avatar_default.png"), //默认头像
				isLogin: false,
				avatar: "",
				userItems: [{
						title: "我的游戏",
						routeName: "newsList",
						number: 256,
					},
					{
						title: "我的收藏",
						routeName: "newsList",
						number: 25,
					},
					{
						title: "我的购物车",
						routeName: "newsList",
						number: 15,
					},
					{
						title: "论坛关注",
						routeName: "newsList",
						number: 250,
					},
				],
				cellItems: [{
						title: "我的游戏",
						name: "mygames",
						img: require("@/assets/images/game.png"),
					},
					{
						title: "我的论坛",
						name: "myForum",
						img: require("@/assets/images/lt.png"),
					},
					{
						title: "我的收藏",
						name: "collection",
						img: require("@/assets/images/sc.png"),
					},
					{
						title: "个人资料",
						name: "profile",
						img: require("@/assets/images/zl.png"),
					},
					{
						title: "我的购物车",
						name: "shopcart",
						img: require("@/assets/images/shopcart.png"),
					},
					{
						title: "我的预约",
						name: "myAppointment",
						img: require("@/assets/images/yy.png"),
					},
					{
						title: "我的订单",
						name: "orderList",
						img: require("@/assets/images/order.png"),
					},
					{
						title: "关于我们",
						name: "about",
						img: require("@/assets/images/gywm.png"),
					},
					{
						title: "设置",
						name: "set",
						img: require("@/assets/images/sz.png"),
					},
				],
			};
		},
		mounted() {
			//初始页面数据
			this.user = getUserLocal();
			this.avatar = this.avatar_default;
			//判断是否用户登录，看Token是否为空
			let token = getTokenLocal();
			this.isLogin = token ? true : false;
			if (this.isLogin) {
				getDetailByIdAPI(this.user.id).then(result => {
					this.avatar = this.APIDomainName + result.data.avatar;
					this.name=result.data.name;
				}).catch(() => {});
			}
		},
		methods: {
			onDetail(id) {
				this.$router.push({
					name: 'login',
				});
			},
		},
		created() {
			getMyCountAPI().then(result => {
				console.log(result.data)
				this.userItems[0].number=result.data.mygames;
				this.userItems[1].number=result.data.mycollection;
				this.userItems[2].number=result.data.mycart;
				this.userItems[3].number=result.data.myconcern;
			}).catch(() => {});
		}
	};
</script>

<style lang="less" scoped>
	.member {
		margin-top: 5px;
		padding: 10px 0 0 2rem;
	}


	.title {
		font-size: 24px;
		color: #000000;
		display: flex;
		margin-left: 1rem;
	}

	.van-grid {
		box-shadow: 1px 1px 20px #C8C9CC;
		margin-top: 2rem;
		margin-left: 1rem;
		margin-bottom: 2rem;
	}
</style>
